<template>
  <BKModal
    v-model="visible"
    width="600px"
    height="500px"
    @close="$emit('close')"
    title="配置界面"
  >
    <el-container>
      <el-main style="padding: 20px 30px 0 10px !important;">
        <BKTree
          ref="tree"
          node-key="id"
          :props="props"
          :mock="treeData"
          :lazy="false"
          has-line
        >
          <div
            slot-scope="{ node }"
            @dblclick="save"
          >
            <span>
              {{ node.label }}
            </span>
          </div>
        </BKTree>
      </el-main>
      <el-footer style="height: auto;">
        <div class="p-a-mini ta-c b-t">
          <el-button
            type="primary"
            @click="save"
            size="mini"
            :loading="saveLoading"
          >
            确定
          </el-button>
          <el-button
            @click="$emit('close')"
            class="modal-form-close-button"
            size="mini"
          >
            关闭
          </el-button>
        </div>
      </el-footer>
    </el-container>
  </BKModal>
</template>
<script>
import { mapState } from 'vuex'
const appId = 'YSJC'
const bzCode = 'YSJC'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectParentNode: {
      type: Object,
      default: () => {}
    },
    currentId: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  data () {
    return {
      props: {
        label: 'label',
        children: 'children',
        isLeaf: 'isLeaf'
      },
      treeData: [],
      saveLoading: false
    }
  },
  async created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    async init () {
      const res = await this.$request.post('/grid/getTableData', {
        appId,
        bzCode,
        metaSet: 'YSQJC_ZHZS_PAGE',
        methodCode: 'select',
        methodParams: JSON.stringify({ queryParam: { FPAGID: this.selectParentNode.id } })
      })
      this.treeData = res.rows.map((item) => {
        return {
          ...item,
          label: item.GNM || item.PAGENM,
          id: item.TYPE === '1' ? item.GID : item.PAGEID,
          isLeaf: true
        }
      })
      if (this.currentId && this.treeData.find(c => c.id === this.currentId)) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentId)
        })
      }
    },
    save () {
      const node = this.$refs.tree.getCurrentNode()
      if (!node) {
        return this.$message.error('请选择一个页面')
      }
      this.$emit('save', node)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .table-tree {
    .bk-tree-wrapper {
      border: 1px solid #e8eaec;
      height: 360px;
    }

    .el-form-item__label::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .el-cascader {
    width: 100%;
  }
}

.el-footer {
  padding: 5px 0;

  .p-a-mini {
    padding: 5px 0 0;
  }

  .modal-form-close-button {
    margin-bottom: -5px;
  }

  position: relative;
}

</style>
